<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: YuanYu
 * @LastEditTime: 2021-10-19 19:02:10
-->
<template>
  <!-- 这里使用ref 作用类似于id -->
  <!-- 2.定义容器 -->
  <div id="right2" style="height: 150px"></div>
</template>

<script>
// 在g2plot中 引入Column组件
import { Line } from "@antv/g2plot";
// 使用vue3.0的语法
// 1.引入g2plot 已经在package.json中进行引用

export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { year: "星期一", value: 12 },
        { year: "星期二", value: 8 },
        { year: "星期三", value: 9 },
        { year: "星期四", value: 15 },
        { year: "星期五", value: 5 },
        { year: "星期六", value: 6 },
        { year: "星期天", value: 7 },
      ];

      const line = new Line("right2", {
        data,
        xField: "year",
        yField: "value",
        label: {},
        point: {
          size: 5,
          shape: "diamond",
          style: {
            fill: "white",
            stroke: "#5B8FF9",
            lineWidth: 2,
          },
        },
        tooltip: { showMarkers: false },
        state: {
          active: {
            style: {
              shadowBlur: 4,
              stroke: "#000",
              fill: "red",
            },
          },
        },
        interactions: [{ type: "marker-active" }],
        // 配置别名
        meta: {
          value: {
            alias: "人数/个",
          },
        },
      });
      line.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>


<style scoped>
</style>